<template>
  <div class="gauge-cpu-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';

// 注册ECharts组件
use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent, LegendComponent]);

// Props定义
interface Props {
  value?: number;
  title?: string;
  centerTitle?: string;
  titleColor?: string;
  centerTitleColor?: string;
  lowColor?: string;
  mediumColor?: string;
  highColor?: string;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value: 85,
  title: 'CPU利用率',
  centerTitle: 'CPU利用率',
  titleColor: '#fff',
  centerTitleColor: '#3488db',
  lowColor: '#42e4fb',
  mediumColor: '#3488db',
  highColor: '#f9387f'
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value: props.value,
  title: props.title,
  centerTitle: props.centerTitle,
  titleColor: props.titleColor,
  centerTitleColor: props.centerTitleColor,
  lowColor: props.lowColor,
  mediumColor: props.mediumColor,
  highColor: props.highColor
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '400px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// CPU利用率仪表盘配置
const chartOption = computed(() => {
  const value = componentProps.value.value;
  const title = componentProps.value.title;
  const centerTitle = componentProps.value.centerTitle;
  const titleColor = componentProps.value.titleColor;
  const centerTitleColor = componentProps.value.centerTitleColor;
  const lowColor = componentProps.value.lowColor;
  const mediumColor = componentProps.value.mediumColor;
  const highColor = componentProps.value.highColor;

  return {
    title: [
      {
        text: title,
        left: '3%',
        top: '5%',
        textStyle: {
          color: titleColor,
          fontSize: 18,
          fontFamily: 'cuhei',
          fontWeight: 300
        }
      },
      {
        text: centerTitle,
        left: 'center',
        top: '65%',
        textStyle: {
          color: centerTitleColor,
          fontSize: 22,
          fontFamily: 'cuhei',
          fontWeight: 600
        }
      }
    ],
    series: [
      {
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 15,
            color: [
              [0.2, lowColor],
              [0.8, mediumColor],
              [1, highColor]
            ]
          }
        },
        radius: '50%',
        markPoint: {
          animation: false,
          silent: true,
          data: [
            {
              x: '50%',
              y: '50%',
              symbol: 'circle',
              symbolSize: 40,
              itemStyle: {
                color: 'auto'
              }
            },
            {
              x: '50%',
              y: '50%',
              symbol: 'circle',
              symbolSize: 20,
              itemStyle: {
                color: '#fff'
              }
            }
          ]
        },
        pointer: {
          width: 10,
          length: '60%',
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          distance: 0,
          length: 5,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          distance: 0,
          length: 15,
          lineStyle: {
            color: 'auto',
            width: 4
          }
        },
        axisLabel: {
          color: centerTitleColor,
          distance: 30,
          fontSize: 20
        },
        detail: {
          formatter: '{value} %',
          color: 'white'
        },
        data: [
          {
            value: value
          }
        ]
      }
    ]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    // 延迟调用resize确保图表正确渲染
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.gauge-cpu-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gauge-cpu-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}
</style>
